<template>
  <div class="analytics">
    <div class="page-header">
      <h1>数据分析</h1>
    </div>
    
    <!-- 关键指标卡片 -->
    <el-row :gutter="20" class="metrics-row">
      <el-col :span="6">
        <el-card>
          <div class="metric-card">
            <div class="metric-icon sales">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <div class="metric-content">
              <h3>销售额</h3>
              <p class="metric-value">¥{{ formatCurrency(salesData.total) }}</p>
              <span class="metric-change positive">
                <el-icon><CaretTop /></el-icon>
                12.5%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card>
          <div class="metric-card">
            <div class="metric-icon orders">
              <el-icon><Document /></el-icon>
            </div>
            <div class="metric-content">
              <h3>订单量</h3>
              <p class="metric-value">{{ orderData.total }}</p>
              <span class="metric-change positive">
                <el-icon><CaretTop /></el-icon>
                8.3%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card>
          <div class="metric-card">
            <div class="metric-icon customers">
              <el-icon><User /></el-icon>
            </div>
            <div class="metric-content">
              <h3>客户数</h3>
              <p class="metric-value">{{ customerData.total }}</p>
              <span class="metric-change positive">
                <el-icon><CaretTop /></el-icon>
                15.7%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card>
          <div class="metric-card">
            <div class="metric-icon profit">
              <el-icon><Coin /></el-icon>
            </div>
            <div class="metric-content">
              <h3>利润率</h3>
              <p class="metric-value">{{ profitData.rate }}%</p>
              <span class="metric-change positive">
                <el-icon><CaretTop /></el-icon>
                3.2%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 图表区域 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 销售趋势图 -->
      <el-col :span="16">
        <el-card>
          <template #header>
            <span>销售趋势</span>
            <el-radio-group v-model="salesPeriod" size="small" style="float: right;">
              <el-radio-button label="7d">7天</el-radio-button>
              <el-radio-button label="30d">30天</el-radio-button>
              <el-radio-button label="90d">90天</el-radio-button>
            </el-radio-group>
          </template>
          <div ref="salesChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
      
      <!-- 商品分类占比 -->
      <el-col :span="8">
        <el-card>
          <template #header>
            <span>商品分类占比</span>
          </template>
          <div ref="categoryChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 热销商品排行 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>热销商品排行</span>
          </template>
          <el-table :data="topProducts" style="width: 100%">
            <el-table-column prop="rank" label="排名" width="60" />
            <el-table-column prop="name" label="商品名称" />
            <el-table-column prop="sales" label="销量" width="80" />
            <el-table-column prop="revenue" label="销售额" width="100">
              <template #default="{ row }">
                ¥{{ formatCurrency(row.revenue) }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      
      <!-- 库存预警 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>库存预警</span>
          </template>
          <el-table :data="lowStockProducts" style="width: 100%">
            <el-table-column prop="name" label="商品名称" />
            <el-table-column prop="currentStock" label="当前库存" width="100" />
            <el-table-column prop="minStock" label="最低库存" width="100" />
            <el-table-column prop="status" label="状态" width="80">
              <template #default="{ row }">
                <el-tag :type="row.status === 'danger' ? 'danger' : 'warning'">
                  {{ row.status === 'danger' ? '缺货' : '低库存' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const salesPeriod = ref('7d')
const salesData = ref({ total: 125800.50 })
const orderData = ref({ total: 856 })
const customerData = ref({ total: 2341 })
const profitData = ref({ rate: 28.5 })

const topProducts = ref([
  { rank: 1, name: 'iPhone 15 Pro Max', sales: 156, revenue: 1559844 },
  { rank: 2, name: 'AirPods Pro 2', sales: 234, revenue: 467766 },
  { rank: 3, name: '小米电视 65英寸', sales: 89, revenue: 266911 },
  { rank: 4, name: 'Nike Air Max 270', sales: 167, revenue: 149633 },
  { rank: 5, name: '三只松鼠坚果礼盒', sales: 456, revenue: 45144 }
])

const lowStockProducts = ref([
  { name: 'iPhone 15 Pro Max', currentStock: 5, minStock: 20, status: 'danger' },
  { name: 'AirPods Pro 2', currentStock: 12, minStock: 30, status: 'warning' },
  { name: '小米电视 65英寸', currentStock: 8, minStock: 15, status: 'warning' },
  { name: 'Nike Air Max 270', currentStock: 3, minStock: 25, status: 'danger' },
  { name: '三只松鼠坚果礼盒', currentStock: 18, minStock: 50, status: 'warning' }
])

const formatCurrency = (value) => {
  return value.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}

const initSalesChart = () => {
  const chart = echarts.init(document.querySelector('.analytics .el-card:nth-child(2) .el-card__body div'))
  
  const option = {
    title: {
      text: '销售额趋势',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['9月1日', '9月2日', '9月3日', '9月4日', '9月5日', '9月6日', '9月7日']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '¥{value}'
      }
    },
    series: [{
      data: [15000, 23000, 18000, 25000, 19000, 22000, 28000],
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#409EFF'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
          { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
        ])
      }
    }]
  }
  
  chart.setOption(option)
}

const initCategoryChart = () => {
  const chart = echarts.init(document.querySelector('.analytics .el-card:nth-child(3) .el-card__body div'))
  
  const option = {
    title: {
      text: '商品分类占比',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [{
      name: '销售额',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '电子产品' },
        { value: 735, name: '服装' },
        { value: 580, name: '食品' },
        { value: 484, name: '家居' },
        { value: 300, name: '其他' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  }
  
  chart.setOption(option)
}

onMounted(() => {
  initSalesChart()
  initCategoryChart()
  
  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    const charts = document.querySelectorAll('.analytics .el-card__body div')
    charts.forEach(chart => {
      const echartInstance = echarts.getInstanceByDom(chart)
      if (echartInstance) {
        echartInstance.resize()
      }
    })
  })
})
</script>

<style scoped>
.analytics {
  padding: 0;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h1 {
  font-size: 24px;
  color: #333;
}

.metrics-row {
  margin-bottom: 20px;
}

.metric-card {
  display: flex;
  align-items: center;
}

.metric-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.metric-icon.sales {
  background-color: #f0f9ff;
  color: #409eff;
}

.metric-icon.orders {
  background-color: #f6ffed;
  color: #52c41a;
}

.metric-icon.customers {
  background-color: #fff7e6;
  color: #faad14;
}

.metric-icon.profit {
  background-color: #fef0f0;
  color: #f5222d;
}

.metric-content h3 {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.metric-change {
  font-size: 12px;
  display: flex;
  align-items: center;
}

.metric-change.positive {
  color: #67c23a;
}

.metric-change.negative {
  color: #f56c6c;
}
</style>
